/*
 * @Author: Wxx
 * @Date: 2022-02-21 15:12:23
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-21 15:39:41
 * @Description:
 */
import React, { Component } from "react";
import axios from "axios";
import BetterScroll from "better-scroll";

export default class App extends Component {
  state = {
    name: "冰墩墩",
    list: [],
  };

  componentDidMount() {
    axios("/test.json").then((res) => {
      console.log(res);
      this.setState({
        list: res.data.data.films,
      });
      // 也可以放在更新完后 componentDidUpdate中初始化
      // new BetterScroll("#wrapper");
    });
  }

  componentWillUpdate() {
    // 当进行setState之后先走 componentWillUpdate==》render==》componentDidUpdate
    console.log("componentWillUpdate", document.getElementById("mydom"));
  }

  // prevProps 更新前的props
  // prevState更新前的状态
  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log("componentDidUpdate", document.getElementById("mydom"));
    //加这个判断之后 就不会造成每次更新state都会初始化betterscroll
    if (prevState.list.length === 0) {
      new BetterScroll("#wrapper");
    }
  }

  render() {
    console.log("render");
    return (
      <div id="mydom">
        <button onClick={() => this.setState({ name: "雪融融" })}>click</button>
        {this.state.name}
        <div
          id="wrapper"
          style={{ height: 100, overflow: "hidden", background: "yellow" }}
        >
          <ul>
            {this.state.list.map((item) => (
              <li key={item.filmId}>{item.name}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}
